<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="header">
<div th:fragment="content">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>人员管理-学生管理</h4>
                </div>
                <div class="card-toolbar clearfix">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a class="btn btn-primary " href="javascript:showModel()"><i class="mdi mdi-plus"></i> 添加</a>
                            </span>
<!--                            <span class="input-group-btn">-->
<!--                                <button class="btn btn-default" type="button">查询</button>-->
<!--                            </span>-->
<!--                            <input type="text" class="form-control" name="sousuo" placeholder="请输入关键字！">-->
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>学院</th>
                                <th>班级</th>
                                <th>最后修改时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--/*@thymesVar id="student" type="cn.edu.gues.infosystam.entity.Student"*/-->
                            <tr th:each="student : ${studentList.getRecords()}" th:id="'student-'+${student.getSno()}">
                                <td th:id="'sno-'+${student.getSno()}" th:text="${student.getSno()}">20200220</td>
                                <td th:id="'sname-'+${student.getSno()}" th:text="${student.getSname()}">许昭</td>
                                <td th:id="'college-'+${student.getSno()}" th:text="${student.getCollege()}">信息工程学院</td>
                                <td th:id="'cname-'+${student.getSno()}" th:text="${student.getCname()}">17软件工程</td>
                                <td th:text="${#dates.format(student.getGmtModified(), 'yyyy-MM-dd HH:mm:ss')}">2020/02-20 12:12:12</td>
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-xs btn-info" th:href="'javascript:edit(\''+ ${student.getSno()} +'\')'" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                        <a style="margin-left: 12px" class="btn btn-xs btn-danger"  th:href="'javascript:delAjax(\''+ ${student.getSno()} +'\')'" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                    <ul class="pagination">
                        <!-- 第一页按钮 -->
                        <li th:class="${studentList.hasPrevious()?'':'disabled'}" >
                            <a th:href="${studentList.hasPrevious()?('/Teacher/Student?p='+(studentList.getCurrent()-1)):'javascript:return false;'}">«</a>
                        </li>
                        <!-- 中间按钮 -->
                        <li th:each="i : ${#numbers.sequence(
                        (studentList.getCurrent()>3?studentList.getCurrent()-2:1)
                        , (studentList.getCurrent()<(studentList.getPages()-2)?studentList.getCurrent()+2:studentList.getPages())
                        )}"
                            th:class="${studentList.getCurrent()==i?'active':''}">
                            <a th:href="'/Teacher/Student?p='+ ${i}" th:text="${i}">???</a>
                        </li>
                        <!-- 最后一页按钮 -->
                        <li  th:class="${studentList.hasNext()?'':'disabled'}" >
                            <a th:href="${studentList.hasNext()?('/Teacher/Student?p='+(studentList.getCurrent()+1)):'javascript:return false;'}">»</a>
                        </li>
                        <li><span th:text="'共 '+ ${studentList.getCurrent()} +' / '+ ${studentList.getPages()} +' 页' ">共 0 / 0 页</span></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>

    <div id="model" hidden>
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <label class="col-xs-12" for="sno">学号:</label>
                    <input id="sno" name="sno" class="form-control" type="text" placeholder="请输入学生学号..">
                </div>
                <div class="form-group">
                    <label class="col-xs-12" for="name">姓名:</label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="请输入学生姓名..">
                </div>

                <div class="form-group">
                    <label class="col-xs-12" for="college">院系:</label>
                    <select id="college" name="college" class="form-control">
                        <option selected="selected" value="">请选择学院</option>
                        <option th:each="college : ${colleges}"
                                th:value="${college.getCollege()}"
                                th:text="${college.getCollege()}"></option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="col-xs-12" for="clsses">班级 :</label>
                    <select id="clsses" name="clsses" class="form-control"></select>
                </div>

                <div class="form-group">
                    <button class="btn btn-block btn-round btn-primary" onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/assets/js/jconfirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="/assets/js/layer/layer.js"></script>
    <script>

        var $college = [];

        $("#college").on('change', function (e) {

            if ($college[$(this).val()] !== undefined) {
                setCollege($college[$(this).val()])
                console.log("本地学院：", $(this).val())
            } else {
                getCollegeAjax($(this).val())
            }

        })

        function reset() {
            $("#sno").val("")
            $("#name").val("")
            $("#college").val("0")
            $("#phone").val("")
            $("#password").val("")
        }

        // TODO: 学生信息编辑功能待完善
        function edit(id) {
            showModel("编辑");
            $("#sno").val(id)
            $("#name").val($("#sname-"+id).text())
            // $("#college option[text='"+$("#college-"+id).text()+"']").attr("selected", true);   //设置Select的Text值为jQuery的项选中
        }

        function showModel(title = "新增") {
            layer.open({
                type: 1,
                title:title+'教师信息',
                skin: 'layui-layer-rim', //加上边框
                area: ['550px', '500px'], //宽高
                content: $('#model')
            });
        }

        /**
         * 设置学院的班级信息
         **/
        function setCollege(college) {
            let html = "";
            $.each(college, function (i, c) {
                html += "<option value='"+ c.cid +"'>"+ c.cname +"</option>";
            })
            $("#clsses").html(html)
        }

        function submit() {
            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/Student/Save",
                dataType: "json",
                data: {
                    "sno": $("#sno").val()
                    ,"sname": $("#name").val()
                    ,"college": $("#college").find("option:selected").text()
                    ,"cname": $("#clsses").find("option:selected").text()
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('您成功保存(修改)了一位教师的信息', 'success', 500);
                            location.reload();
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });

        }

        /**
         * 异步删除学生
         * @param id 学号
         */
        function delAjax(id){
            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/Student/Del",
                dataType: "json",
                data: {
                    "sno": id,
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('您成功删除了一名学生~', 'success', 1000);
                            $("#student-" + id).remove();
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });

        }

        /**
         * 异步获取学院的班级信息
         * @param college 学院名称
         */
        function getCollegeAjax(college) {
            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/Cclass/getCollege",
                dataType: "json",
                data: {
                    "college": college,
                },
                success: function (data, status) {
                    console.log("返回结果集：",data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            console.log("远端学院：", data.data.college)
                            $college[college] = data.data.college;
                            setCollege(data.data.college)
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });
        }
    </script>

</div>
</html>